<template>
  <div class="zN45" v-show="whoShow==1">
    
    <div
      class="rMoneyBox padding10"
      :style="`width:${suoJ?'200px':'50px'}; height:${suoJ?'auto':'50px'};`"
    >
      <div v-show="suoJ">
        <div class="f_16 f_bold c333">商标注册 - 智能推荐</div>
        <div class="c999">
          <div>
            总共
            <span class="f_bold cBlue f_20">{{$app.zongXuJ($app.z_XHuan(cglist))}}</span>
            项
          </div>
          <div>
            总额：<span class="f_bold cBlue marginR5">¥</span>
            <span class="f_bold cBlue f_20">{{$app.zongJiaJ($app.z_XHuan(cglist))}}</span>
          </div>
        </div>
      </div>
      <Icon
        :type="`${suoJ?'ios-arrow-dropright':'ios-arrow-dropleft-circle'}`"
        size="28"
        class="pointer suoJ"
        :class="`${suoJ?' cCCC':' cBlue'}`"
        @click="suoJ=!suoJ"
      />
    </div>

    <Row class="lineH34 f_14 paddingB10" :gutter="15">
      <template v-for="(val,i) in cglist">
        <Col 
          class="txtOneLine textLink"
          :span="4"
          :class="$app.judgeData(val.editList) ? ' delLine ':' '"
          :title="`第${val.fcgnum}类-${val.fcgname}`"
        >
          <div @click="cglist_all(val)">第{{val.fcgnum}}类-{{val.fcgname}}</div>
        </Col>
      </template>
    </Row>

    

    <!-- 循环多多 -->
    <template v-for="(val,i) in cglist">
      <template v-if="$app.judgeData(val.editList)">
      <div>
        <Divider orientation="left" class="marginT5 marginB5 f_16">
          第
          <span class="cBlue">{{val.fcgnum}}</span>
          类 -
          {{val.fcgname}}
        </Divider>
        <div class=" owtT tran3 overflowH">
          <div class="marginB10">
            <Row class="padding5-10 lineH34 f_14" :gutter="15">
              <template v-for="(jar,r) in (val.editList)">
                <Col
                  span="4"
                  class=" txtOneLine "
                  :title="`${jar.fcgnum}${$app.judgeData(jar.fcgnum)&&'-'}${jar.fcgname}`"
                >{{jar.fcgnum}}{{$app.judgeData(jar.fcgnum)?'-':''}}{{jar.fcgname}}</Col> 
              </template>
            </Row>
          </div>
        </div>
        <div class=" textRight marginR20 ">
          <span class=" f_18 lineH34 marginR30">
            已选
            <span class="cBlue f_bold f_20">{{(val.editList).length}}</span>
            项，合计
            <span class="cBlue f_bold f_20">¥{{$app.addEachTmDo((val.editList).length)}}</span>
          </span>

          <Button
            type="primary"
            class="relative marginR20"
            ghost
            style="top:-3px;"
            size="small"
            @click="xonQ(val)"
          >
            <Icon type="md-trash" size="16" class="marginR5 relative"  />删 除
          </Button>
          <Button
            type="primary"
            class="relative"
            style="top:-3px;"
            size="small"
            @click="erJi_Fun(val,i)"
          >
            <Icon type="md-create" size="16" class="marginR5 relative"  />编 辑
          </Button>
        </div>
        
      </div>
      </template>
    </template>

    <Divider class="marginT20 marginB10"></Divider>
    <div class=" f_18 ">
      总共
      <span class="f_bold cBlue f_28">
        {{$app.zongXuJ($app.z_XHuan(cglist))}}
      </span>
      项，总额：
      <span class="f_bold cBlue">
        ¥
      </span>
      <span class="f_bold cBlue f_28">
        {{$app.zongJiaJ($app.z_XHuan(cglist))}}
      </span>
    </div>


    

  
    
    

    <!-- 二级选 class-name="vertical-center-modal" -->
    <Modal
      :value="$app.judgeData(erJi_Show())"
      :title="`第${erJi_Show().fcgnum}类 - ${erJi_Show().fcgname}`"
      @on-visible-change="onChange"
      :mask-closable="false"
      width="1100"
    >
      <div class="zSB45_box">
        <Row>
            <Col span="5" class="zSB45_L" id="zSB45_L">
              <template v-for="(val,i) in (erJi_Show().items)">
                <div
                  class="padding10 textLink f_14"
                  :class="jtQ1(val)"
                  @click="owtP(val,i)"
                >{{val.fcgnum}}{{$app.judgeData(val.fcgnum)?'-':''}}{{val.fcgname}}</div>
              </template>
            </Col>
            <Col span="7" class="zSB45_R" id="zSB45_R">
              <template v-for="(val,i) in (erJi_Show().items)">
                <template v-if="val.check">
                  <template v-for="(jar,r) in (val.items)">
                    <div
                      class="padding10 textLink f_14"
                      :class="jtQ2(jar)"
                      @click="b3(jar)"
                    >{{jar.fcgnum}}{{$app.judgeData(jar.fcgnum)?'-':''}}{{jar.fcgname}}</div>
                  </template>
                </template>
              </template>
            </Col>
          <Col span="12">
            <div class="zSB45_Z bgWhite">
              <div class="f_16 paddingLi f_bold">
                已选中：<span class="f_12 f_normal c999">（操作说明：点击单个子类可删除）</span>
              </div>
              <Row class="paddingLR15" :gutter="15">
                <template v-for="(val,i) in (erJi_Show().editList)">
                  <Col span="12" >
                    <div class="f_14 padding10 tD pointer tran3" @click="xw_Tc(val)">
                      {{val.fcgnum}}{{$app.judgeData(val.fcgnum)?'-':''}}{{val.fcgname}}
                    </div>
                  </Col>
                </template>
              </Row>
            </div>
          </Col>
        </Row>
      </div>
      <div slot="footer" class="textLeft" style="height:34px;">
        <div class="pullLeft lineH34 c999">
          每一类别为{{allK}}元，包含10个小分类，超出10个，每个{{item_fee}}元
        </div>
        <div class="pullRight f_18 lineH34">
          已选
          <span class="cBlue f_bold f_20">{{$app.judgeData(erJi_Show()) && (erJi_Show().editList).length}}</span>
          项，合计
          <span class="cBlue f_bold f_20">¥{{$app.judgeData(erJi_Show()) && $app.addEachTmDo((erJi_Show().editList).length)}}</span>
        </div>
      </div>
    </Modal>

    
    
  </div>
</template>

<style scoped>
.owtT:hover{background-color: #f6f6f6;}
</style>


<script>
import FenLei45TT from "@$@/js/$common/fenLei45TT";
export default {
  name: "z1",
  components: {},
  data() {
    let {
      tm_register:{
        base_official_fee,
        base_service_fee,
        item_fee
      }
    }=$app.getSession('bigSetting');

    

    let data = {
      /**
       * cglist.items.参数如下
       *    check=> 用这个参数，弹框二次编辑时专用
       *    active => 已经选中 (新方法升级，这个参数，已经不用了)
       *    disabled => 禁止选（只用担保注册会用到）
       * 第三级的fcgparent 与 第二级的fcgid 相等，二级与一级同理
       * cglist 第一级，自己手动加多了一个 editList:[] 方便处理
       * 一级，二级，一定有fcgnum；第三级，不一定
       **/
      cglist: []
    };
    

    let tool = {

      suoJ: true //右上角浮动框：true显示，false隐藏
    };

    let money = {
      allK:parseFloat(base_official_fee)+parseFloat(base_service_fee),
      item_fee:parseFloat(item_fee)
    };
    
    return Object.assign(data, tool,money);
  },
  props: ["whoShow"],
  created() {
    this.b0_Z();
  },
  mounted() {},
  methods: {
    // 万物归零
    b0_Z(){
      this.cglist=[];//清空数据 45栏目
      this.b0();
    },
    // 永远的第一次
    b0(callBack){
      $ajax.mGlistAll({
        fcgparent:0
      },resData=>{
        if($app.judgeData(this.cglist)){
          //已经有值，不重新操作，否则会清空掉，原来命中的值
        }else{
          this.$set(this, "cglist", resData);//赋值
        }

        callBack instanceof Function && callBack();
      });
    },

    //第一级的大类
    cglist_all(val) {
      let { fcgid } = val;

      if ($app.judgeData(val.editList)) {
        console.log("已经选中，不给你点");
      } else {
        $ajax.cDeCgs({
          fcgid
        }, resData => {
          this.$set(val,"editList",resData);
          // console.log(this.cglist)
        });
      }
    },
    erJi_Fun_A(val,callBack){
      if($app.judgeData(val.items)){
        //已经有儿子 items
        callBack();
      }else{
        $ajax.mGlistAll({
          fcgparent:val.fcgid
        },resData=>{
          this.$set(val,"items",resData);//儿子赋值
          callBack();
        });
      }
    },

    //编辑框显示
    erJi_Fun(val,i) {
      this.erJi_Fun_A(val,()=>{
        this.erJi_Fun_To(i);
        document.getElementById('zSB45_L').scrollTo(0,0); //滚动回顶部
        document.getElementById('zSB45_R').scrollTo(0,0); //滚动回顶部
      })
    },
    // 配合上者使用
    erJi_Fun_To(i){
      (this.cglist).forEach((val,r)=>{
        this.$set(val,"check",(i==r));
      });
    },
        
    erJi_Show(){
      let out=false;

      let {
        cglist
      }=this;

      for(let i=0;i<cglist.length;i++){
        if(!!cglist[i].check){
          out=cglist[i];
          break;
        }
      }

      return out;
    },
    onChange(buEr){
      if(!buEr){
        
        (this.cglist).forEach((val,i)=>{
          this.$set(val,"check",false);
          if($app.judgeData(val.items)){
            (val.items).forEach((jar,r)=>{
              this.$set(jar,"check",false);
            });
          }
        });
      
      }
    },
    owtP(val,i){
      this.erJi_Fun_A(val,()=>{
        this.owtP_To(i);
      })
    },
    // 配合上者使用
    owtP_To(i){
      let cglistEr=this.erJi_Show().items;
      cglistEr.forEach((val,r)=>{
        this.$set(val,"check",(i==r));
        document.getElementById('zSB45_R').scrollTo(0,0); //滚动回顶部
      });
    },

    //删除单个
    xw_Tc(val) {
      if ((this.erJi_Show().editList).length == 1) {
        this.judLast(this.erJi_Show(), ()=>{
          $app.arrayRemove(this.erJi_Show().editList,val);
        });
      } else {
        $app.arrayRemove(this.erJi_Show().editList, val);
      }
    },

    //删除总
    xonQ(val){
      this.judLast(val,()=>{
        this.$set(val, "editList", undefined);
      });
    },

    //判断是否剩下最后一个，配合上者使用
    judLast(val, callBack) {
      $app.confirm(
        "第 " + val.fcgnum + " 类 - " + val.fcgname,
        "删除该分类", {
          yesFun:()=>{
            callBack();
            this.onChange(false);
          }
        }
      );
    },
    b3(jar){
      if (FenLei45TT.xonqXw(this.erJi_Show(), jar)) {
        //不做任何处理 要删除，请去右边命中框做操作
      }else{
        this.erJi_Show().editList.push(jar);
      }
    },

    

    // css样式高亮控制
    jtQ1(val){
      let out =' ';
      let buEr=FenLei45TT.xonqT(this.erJi_Show(),val);
      out+=(val.check ? ' cBlue ':' ');
      out+=(buEr ? ' f_bold ':' ');
      return out;
    },
    jtQ2(jar){
      let out =' ';
      let buEr=FenLei45TT.xonqXw(this.erJi_Show(),jar);
      out+=(buEr ? ' delLine ':' ');
      return out;
    },

  }
};
</script>

